<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ page import="managesystem.Student"%>
<%@ page import="managesystem.StudentManager"%>
<%@ page import="controlsystem.CourseManager"%>
<%@ page import="tracksystem.SchoolActivity"%>
<%@ page import="tracksystem.OtherActivity"%>
<%@ page import="java.util.Collection"%>
<%@ page import="java.util.List"%>
<%@ page import="java.util.ArrayList"%>
<%@ page import="java.util.Iterator"%>
<%@ page import="controlsystem.Course"%>
<%@ page import="controlsystem.CourseDescription"%>
<script type="text/javascript" src="../scripts/flexigrid.pack.js"></script>
<script type="text/javascript" src="../scripts/jquery.blockUI.js"></script>
<link rel="stylesheet" type="text/css" href="../styles/flexigrid.pack.css" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    
<%
	Student currStud = (Student) session.getAttribute("currStud");

	Collection<Course> studCourses = currStud.getCourses();
	List<CourseDescription> availableCourses = CourseManager.findAll();
	List<SchoolActivity> schoolactivities = currStud.getOnlySchoolActs();
	List<OtherActivity> otheractivities = currStud.getOnlyOtherActs();
	
	Iterator<CourseDescription> iter = availableCourses.iterator();
	while(iter.hasNext()){ // zolang er een available course is blijven checken
		CourseDescription avc = iter.next();
		for(Course c : studCourses){ 
			if(c.getName().equals(avc.getName())){
				iter.remove(); //verwijder de courses die al gevolgd worden
			}
		}
	}
%>
<div class=tekstBlok>
	<h3>Profile information</h3>
	<ul>
	<li>Username: <%=currStud.getUsername()%></li>
	<li>First name: <%=currStud.getFname()%></li>
	<li>Last name: <%=currStud.getLname()%></li>
	<li>Email: <%=currStud.getEmail()%> <input type="button" id="action1" value="change Email"></li> 
	<li>Password: <input type="button" id="action2" value="change Password"></li>
	</ul>
</div>

<div class=tekstBlok>
	<h3>View, add and delete courses</h3>
	<form id="addCourse" action="/addStudCourse" method="POST"
		style="display: none; cursor: default">
		<%
		if(availableCourses.size()==0){
			%>
			<p> No more courses available. </p>
			<input type="button" id="cancel" value="Cancel" />
			<%
		}else{
			%>
		
		<select name="courseChoice">
			<%
				for(CourseDescription c : availableCourses){
			%>
						<option value=<%=c.getName()%>><%=c.getName()%></option>
					<%
						}
			%>
			
		</select> 
		<input type="button" id="add" value="Add course" /> 
		<input type="button" id="cancelAdd" value="Cancel" />
		<%
			}
					%>
		
	</form>
	<form id="deleteCourse" action="/deleteStudCourse" method="POST"
		style="display: none; cursor: default">
		<%
		if(studCourses.size()==0){
			%>
			<p> Student isn't enrolled in any course. </p>
			<input type="button" id="cancelAdd" value="Cancel" />
			<%
		}else{
			%>
		
		<select name="courseChoice">
			<%
				for(Course c : studCourses){
			%>
						<option value=<%=c.getName()%>><%=c.getName()%></option>
					<%
						}
			%>
			
		</select> 
		<input type="button" id="delete" value="Delete" /> 
		<input type="button" id="cancelDelete" value="Cancel" />
		<%
			}
					%>
		
	</form>
	<table class="courseTable">
		<thead>
			<tr>
				<th width="150">Course name</th>
				<th width="150">Professor</th>
				<th width="150">Studypoints</th>

			</tr>
		</thead>
		<tbody>
			<%
				for(Course c : studCourses){
			%>
			<tr>
				<td><%=c.getName()%></td>
				<td><%=c.getProf()%></td>
				<td><%=c.getStudyPoints() %></td>

			</tr>
			<%
                	}
                 %>
		</tbody>
	</table>
	
	<form id ="deleteConfirm" style="display: none; cursor: default">
		<p> Are you sure you want to remove this course ? All activities and milestones will be removed to.</p>
			<input type="button" id="yes" value="Yes, I fully understand." /> 
			<input type="button" id="no" value="No" />
	</form>
	<script>
		$('.courseTable').flexigrid({
			title: "Enrolled Courses:",
			buttons : [ {
				name : 'Add',
				bclass : 'add',
				onpress : action
			}, {
				name : 'Delete',
				bclass : 'delete',
				onpress : action
			}, {
				separator : true
			} ],
			
			singleSelect: true

		});

		function action(com, grid) {
			if (com == 'Delete') {
				$.blockUI({
					message : $('#deleteCourse')
				});
				$('#delete').click(function() {
					confirmMessage();
				});
				$('#cancelDelete').click(function() {
					$.unblockUI();
					return false;
				});

			} else if (com == 'Add') {

				$.blockUI({
					message : $('#addCourse')
				});
				$('#add').click(function() {
					document.forms["addCourse"].submit();
				});
				$('#cancelAdd').click(function() {
					$.unblockUI();
					return false;
				});

			}
		}
		function confirmMessage(){
			$.blockUI({
				message : $('#deleteConfirm')
			});
			$('#yes').click(function() {
				document.forms["deleteCourse"].submit();
			});
			$('#no').click(function() {
				$.unblockUI();
				return false;
			});
		}
	</script>
</div>
<div class="tekstBlok">
<h3>School activities overview</h3>
<table class="schoolTable">
<%if(schoolactivities!= null){ %>
		<thead>
			<tr>
				<th width="150">Course name</th>
				<th width="150">Type</th>
				<th width="150">Description</th>
			

			</tr>
		</thead>
		<tbody>
			<%	
				for(SchoolActivity sa : schoolactivities){
			%>
			<tr>
				<td><%=sa.getCourse().getName()%></td>
				<td><%=sa.getType()%></td>
				<td><%=sa.getDescription() %></td>
				

			</tr>
			<%
                	}
                 %>
		</tbody>
	</table>
	<script>
	$('.schoolTable').flexigrid({
			title: "SchoolActivities tracked:",
			singleSelect: true

		});
	</script>
	<%}else{%>
	<p style="color:red;">No school activities are tracked yet.</p>
	<%} %>
	
</div>
<div class="tekstBlok">
<h3>Other activities overview</h3>
<table class="otherTable">
<%if(otheractivities!= null){ %>
		<thead>
			<tr>
				<th width="150">Type</th>
				<th width="150">Description</th>
				

			</tr>
		</thead>
		<tbody>
			<%	
				for(OtherActivity oa : otheractivities){
			%>
			<tr>
				<td><%=oa.getType()%></td>
				<td><%=oa.getDescription()%></td>
				

			</tr>
			<%
                	}
                 %>
		</tbody>
	</table>
	<script>
	$('.otherTable').flexigrid({
			title: "OtherActivities tracked:",
			singleSelect: true

		});
	</script>
	<%}else{%>
	<p style="color:red;">No other activities are tracked yet.</p>
	<%} %>
	
</div>

<form action="/changeEmail" method="post" id="emailForm" style="display:none">
	<p>Change your emailadress.</p><br>
    <input type="hidden" name="tempId" />
    <label>Your new email:</label>
    <input type="text" name="emailadress"/><br>
    <br><input type="button" id="change1" value="change Email"><br>
    <input type="button" id="cancel1" value="cancel">
</form>
<script>
	$("#action1").click(function () { 
		$.blockUI({
			message : $('#emailForm')
		});
		$('#change1').click(function() {
			document.forms["emailForm"].submit();
		});
		$('#cancel1').click(function() {
			$.unblockUI();
			return false;
		});
	    });
</script>

<form action="/changePassword" method="post" id="passwordForm" style="display:none">
	<p>Change your Password.</p><br>
    <input type="hidden" name="tempId" />
    <label>Enter new password:</label>
    <input type="password" name="firstPassword"/><br>
    <label>Confirm new password:</label>
    <input type="password" name="secondPassword"/><br>
    <br><input type="button" id="change2" value="change Password"><br>
    <input type="button" id="cancel2" value="cancel">
</form>
<script>
	$("#action2").click(function () { 
		$.blockUI({
			message : $('#passwordForm')
		});
		$('#change2').click(function() {
			document.forms["passwordForm"].submit();
		});
		$('#cancel2').click(function() {
			$.unblockUI();
			return false;
		});
	    });
</script>

